<template>
	<view v-if="cartList.length">
		<my-address></my-address>
		<view class="cart-list">
			<view class="title">
				<uni-icons type="shop" size="20"/>
				<text>购物车</text>
			</view>
			<!-- 列表部分 -->
			<uni-swipe-action>
				<block v-for="i in cartList">
					<uni-swipe-action-item :right-options="options" @click="delGoods(i.goods_id)">
					<view class="goods-item" :key="i.goods_id">
						<view class="goods-left">
							<radio color="#c00000" :checked="i.goods_state" @click="radioChange(i.goods_id)"/>
							<image :src="i.goods_small_logo" @click="gotoDetail(i.goods_id)"/>
						</view>
						<!-- 右边view -->
						<view class="goods-info">
							<view class="goods-title">{{ i.goods_name }}</view>
							<view class="price">
								<view class="price-text">￥ {{ i.goods_price.toFixed(2) }}</view>
								<uni-number-box @change="changeCount(i.goods_id, $event)" :min="1" :value="i.goods_count" />
							</view>
						</view>
					</view>
					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>
		</view>
		<!-- 结算区域 -->
		<my-settle></my-settle>
	</view>
	<!-- 放没有购物车商品时的结构 -->
	<view v-else class="empty">
		<image src="/static/cart_empty@2x.png"></image>
		<text>空空如也~</text>
	</view>
</template>

<script>
	import tabbarBadge from '../../mixins/tabbar-badge.js';
	import { mapState } from 'vuex'
	export default {
		name: 'cart',
		mixins: [tabbarBadge],
		computed: {
			...mapState('m_cart', ['cartList'])
		},
		data() {
			return {
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#c00000'
						}
					}
				]
			}
		},
		methods: {
			radioChange(id) {
				this.$store.commit('m_cart/setGoodsChecked', id);
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: `/subpkg/goods_detail/goods_detail?goods_id=${id}`
				})
			},
			changeCount(id, count) {
				this.$store.commit('m_cart/setGoodsCount', {
					id,
					count
				})
			},
			delGoods(id) {
				this.$store.commit('m_cart/delGoods', id)
			}
		}
	}
</script>

<style lang="scss">
.cart-list {
	padding-bottom: 50px;
	.title {
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1px solid #f4f4f4;
		text {
			vertical-align: middle;
			margin-left: 20rpx;
			font-size: 14px;
		}
	}
	.goods-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1px solid #f4f4f4;
		.goods-left {
			display: flex;
			align-items: center;
			image {
				width: 120px;
				height: 120px;
			}
		}
		.goods-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			.goods-title {
				width: 400rpx;
				font-size: 14px;
				line-height: 30rpx;
			}
			.price {
				display: flex;
				justify-content: space-between;
				.price-text {
					color: #c00000;
				}
			}
		}
	}
}
.empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	color: gray;
	image {
		width: 60px;
		height: 60px;
		margin-bottom: 20rpx;
	}
}
</style>
